<template>
  <div>
    <div style="display: flex; align-items: center; padding: 10px; color: #fff;">
      <span style="margin-right: 20px; font-weight: bold;">精细化天气预报</span>
      <span style="margin-right: 20px;">|</span>
      <span style="display: flex; align-items: center;">
        <span>延伸期预报</span>
      </span>
    </div>

    <el-menu
      v-if="county === '雅安'"
      :default-active="activeTab"
      class="el-submenu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item
        v-for="tab in tabs"
        :key="tab.name"
        :index="tab.name"
      >
        {{ tab.label }}
      </el-menu-item>
    </el-menu>
    <div v-if="county !== '雅安'" class="forecast-title" style="color: white;">
      {{ county }} 30天天气预报
    </div>
    <div id="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import Request from "@/utils/request";
import Cookies from "js-cookie";

export default {
  name: "ExtendForecast",
  data() {
    return {
      county: Cookies.get('county'),
      activeTab: "1", 
      temperatures: [],
      rainfall: [],
      weatherData: "",
      tabs: [
        { label: "雅安", name: "1" },
        { label: "荥经", name: "2" },
        { label: "芦山", name: "3" },
        { label: "石棉", name: "4" },
        { label: "汉源", name: "5" },
        { label: "宝兴", name: "6" },
        { label: "天全", name: "7" },
        { label: "名山", name: "8" },
      ],
    };
  },
  mounted() {
    this.fetchWeatherData(this.county);
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleSelect(tabName) {
      this.activeTab = tabName;
      const tab = this.tabs.find((item) => item.name === tabName);
      if (tab) {
        this.fetchWeatherData(tab.label);
      }
    },
    fetchWeatherData(county) {
      Request.get("/weatherforecast/weatherforecast30Days", {
        params: { county },
      })
        .then((response) => {
          this.weatherData = response.data.data;
          this.temperatures = this.weatherData.temperature;
          this.rainfall = this.weatherData.rainfall;
          console.log(this.weatherData);
          this.updateChart();
        })
        .catch((error) => {
          console.error("Error fetching weather data:", error);
        });
    },
    initChart() {
      const chart = echarts.init(document.getElementById("chart"));
      const option = {
        tooltip: {
          trigger: "axis",
        },
        backgroundColor: '#0c2340',
        legend: {
          data: ["降水量", "最高气温", "最低气温", "平均气温"],
          textStyle: {
          color: '#fff' 
            }
        },
        xAxis: {
          type: "category",
          data: this.weatherData.date,
        },
        yAxis: [
          {
            type: "value",
            name: "降水量(mm)",
            position: "left",
            min: 0,
            max: 100,
            interval: 20,
          },
          {
            type: "value",
            name: "气温(°C)",
            position: "right",
            min: 0,
            max: 40,
            interval: 10,
          },
        ],
        series: [
          {
            name: "降水量",
            type: "bar",
            data: this.rainfall,
            itemStyle: {
              color: "#1f78b4",
            },
          },
          {
            name: "最高气温",
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            data: this.weatherData.temperatureHighest,
            itemStyle: {
              color: "#d62728",
            },
          },
          {
            name: "最低气温",
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            data: this.weatherData.temperatureLowest,
            itemStyle: {
              color: "#2ca02c",
            },
          },
          {
            name: "平均气温",
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            data: this.weatherData.temperatureAvr,
            itemStyle: {
              color: "#ff7f0e",
            },
          },
        ],
      };
      chart.setOption(option);
    },
    updateChart() {
      this.initChart();
    },
    handleResize() {
      this.initChart();
    },
  },
};
</script>

<style scoped>
.el-submenu-demo {
  background-color: transparent; 
  color: white;
  font-weight: bold;
}

.el-submenu-demo .el-menu-item {
  color: white;
  border-bottom: 2px solid transparent; 
  transition: all 0.3s ease;
}

.el-submenu-demo .el-menu-item:hover {
  background-color: transparent;
  color: #1f78b4; 
  border-bottom: 2px solid #1f78b4; 
}

.el-submenu-demo .el-menu-item.is-active {
  background-color: transparent;
  color: #1f78b4; 
  border-bottom: 2px solid #1f78b4; 
}
.chart {
  width: 100%;
  height: 70vh;
  margin-top: 20px;
  background-color: rgba(255, 255, 255, 0.7);
}
</style>
